// 获取元素tbody，后面要将表格内容和数据加到tbody上
const $tbody = $('#shop-tbody');
getData();
// 封装方法，方便其他功能调用
// 使用ajax异步发送请求，直接调用封装好的方法
// 这里的Ajax请求是在首页发送的，虽然代码在js目录下，但寻找文件的地址不用返回上一级
function getData () {
    $.ajax({
        method: 'GET',
        url: 'api/shop/select.php',
        success: function (resp) {
            if (resp.code === 200) {
                // 使用解构赋值取出数据
                const { list } = resp.body;
                // 使用一个字符串存储表格和数据
                let str = ``;
                // 循环数组把内容存起来
                // 数据库中的id值是唯一的，删除数据之后又添加新的数据不会占用已删除数据的id值
                // 用户看到的编号在删除之后新增会被占用，可以给数组一个自定义属性
                list.forEach((shop, index) => {
                    str += 
                        `
                        <tr data-id="${shop.id}">
                            <td>${index + 1}</td>
                            <td><span>${shop.name}</span><input class="inputName" type="text"></td>
                            <td><span>${shop.price}</span><input class="inputPrice" type="text"></td>
                            <td><span>${shop.num}</span><input class="inputNum" type="text"></td>
                            <td><span>${shop.size}</span><input class="inputSize" type="text"></td>
                            <td>
                                <button class="btn btn-info btn-sm btn-customize-edit">编辑</button>
                                <button class="btn btn-danger btn-sm btn-customize-del">删除</button>
                                <button class="btn btn-success btn-sm btn-customize-sure">确定</button>
                                <button class="btn btn-warning btn-sm btn-customize-cancel">取消</button>
                            </td>
                        </tr>
                        `
                })
                // 将字符串添加给tbody
                $tbody.html(str);
            }
        },
        error: function () {
            alert('网络错误，无法显示数据')
        },
        dataType: 'json'
    })
}